<template>
	<section>
		<!--查询工具栏-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-input v-model="filters.name" placeholder="部门名"></el-input>
				</el-form-item>
				<el-form-item>
					<el-dropdown>
						<template>
							<el-select v-model="value" clearable filterable placeholder="请选择">
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</template>
						<el-dropdown-menu></el-dropdown-menu>
					</el-dropdown>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getDept">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleAdd">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--部门展示列表-->
		<el-table :data="dept" highlight-current-row v-loading="false" @selection-change="selsChange" style="width: 100%;">
			<el-table-column type="selection" ></el-table-column>
			<el-table-column type="index" ></el-table-column>
			<el-table-column prop="name" label="部门名称" sortable></el-table-column>
			<el-table-column prop="sn" label="部门编号"   sortable></el-table-column>
			<el-table-column prop="manger.username" label="部门经理"   sortable></el-table-column>
			<el-table-column prop="parentdept.name" label="上级部门"   sortable></el-table-column>
			<el-table-column prop="state" label="部门状态"  sortable>
				<template scope="scope">
					<el-button type="success" size="small"  v-if="scope.row.state==1">启用</el-button>
					<el-button type="danger" size="small" v-else>禁用</el-button>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="150">
				<template scope="scope">
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--分页工具栏-->
		<el-col :span="24" class="toolbar">
			<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="pagesize" :total="total" style="float:right;">
			</el-pagination>
		</el-col>
		
		<!--新增模态框
			rules：效验规则
			ref：效验名
		-->
		<el-dialog :title="title" :visible.sync="addFormVisible" :close-on-click-modal="false">
			<el-form :model="addForm" label-width="80px" :rules="rules" ref="ruleForm">
				<el-form-item label="部门名" prop="name">
					<el-input v-model="addForm.name" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="状态">
					<el-radio-group v-model="addForm.state">
						<el-radio class="radio" :label="1">启用</el-radio>
						<el-radio class="radio" :label="0">禁用</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="部门编号" prop="sn">
					<el-input-number v-model="addForm.sn" :min="0" :max="200"></el-input-number>
				</el-form-item>
				<el-form-item label="部门经理" prop="manager_id">
					<template>
						<el-select v-model="addForm.manager_id" clearable placeholder="请选择">
							<el-option v-for="item in mangeroptions" :key="item.id" :label="item.username" :value="item.id"></el-option>
						</el-select>
					</template>
				</el-form-item>
				<el-form-item label="上级部门">
					<template>
						<el-cascader v-model="addForm.dirPath" :options="parentoptions" :props="{ checkStrictly: true }" clearable></el-cascader>
					</template>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
	import util from '../../common/js/util'
	import {batchRemoveUser} from "../../api/api";
	//import NProgress from 'nprogress'
	export default {
		/* 所有模板 */
		data() {
			return {
				/* 效验规则 */
				rules: {
					name: [
						{ required: true, message: '请输入部门名称！！', trigger: 'blur' }
					],
					sn: [
						{ required: true, message: '请输入部门id名称！！', trigger: 'blur' }
					],
					manager_id: [
						{ required: true, message: '请选择部门经理名称', trigger: 'blur' }
					]
				},
				title:"",/* 添加修改模态框标题 */
				addFormVisible:false,/* 显示隐藏模态框 */
				dept:[],/* 所有部门全部信息 */
				/* 查询条件 */
				filters:{
					name:'',
					state:''
				},
				addLoading:false,/* 加载圈 */
				//新增界面数据
				addForm: {
					id:'',
					name:'',
					state:'',
					sn:'',
					parent_id:'',
					manager_id: '',
					dirPath:''
				},
				sels:[],/* 批量删除的id数组 */
				total:0,/* 数据总量 */
				pagesize:10,/* 每页显示条数 */
				currentPage:1,/* 当前页 */
				/* 部门状态下拉选项 */
				options: [{
					value: '0',
					label: '禁用'
				}, {
					value: '1',
					label: '启用'
				}],
				value: '',/* 选择后的值 */
				parentoptions:[],/* 上级部门信息 */
				mangeroptions: []/* 领导者信息 */
			}
		},
		methods: {
			/* 获取部门信息 */
			getDept(){
				let pageInfo = {
					name : this.filters.name,
					localPage : 1,
					pageSize : this.pageSize,
					state : this.value
				}
				this.$http.post("/api/dept",pageInfo).then(res=>{
					this.dept = res.data.data
					//console.debug(this.dept)
					this.total = res.data.total
				}).catch()
			},
			/* 修改、保存 提交信息 */
			addSubmit(){
				this.addForm.manger = {id:this.addForm.manager_id}
				/* 判断上级部门选择了 */
				if(this.addForm.dirPath){
					//将上级id取出来赋给parent_id
					//this.addForm.parent_id = this.addForm.dirPath[this.addForm.dirPath.length-1]
					this.addForm.parentdept = {id:this.addForm.dirPath[this.addForm.dirPath.length-1]}
					/* dirPath保存的是数组，转成字符串 */
					this.addForm.dirPath = this.addForm.dirPath.toString();
				}
				/* 带起表单数据向后台请求 */
				this.$refs["ruleForm"].validate((valid) => {
				          if (valid) {
							  this.$http.put("/api/dept/",this.addForm).then(res=>{this.$message({
							  	message: res.data.msg,
							  	type: 'success'
							  })});
							 this.addFormVisible = false;/* 关闭模态框 */
							 this.loadDeptdata().catch()/* 重新加载页面 */ 
						  }})
			},
			/* 点击修改按钮触发 */
			handleEdit(index, row) {
				this.title = "修改";/* 修改模态框标题 */
				this.$http.post("/api/dept/parentName").then(res=>{/* 发送请求获取上级部门信息 */
					this.parentoptions = res.data
				}).catch();
				this.$http.post("/api/dept/mangerName").then(res=>{/* 发送请求获取上级领导信息 */
					this.mangeroptions = res.data
				}).catch()
				this.addFormVisible = true;/* 显示模态框 */
				this.addForm = row;/* 回显普通类型数据 */
				/* 回显部门领导 */
				console.debug(row)
				this.addForm.manager_id = row.manger.id
				let dirtype = typeof row.dirPath/* 获取dirPath类型 */
				if(row.dirPath&&dirtype=='string'){/* 判断是否有dirpath和类型是否为String */
					this.addForm.dirPath = row.dirPath.split(",").map(Number);/* 分割并将数据转化为数字 */
				}
			},
			/* 点击添加事件 */
			handleAdd(){
				this.title = "新增";/* 修改标题 */
				if(this.$refs["ruleForm"]){/* 判断是否效验 */
					this.$refs["ruleForm"].resetFields();/* 清空效验 */
				}
				this.$http.post("/api/dept/parentName").then(res=>{/* 发送请求 获取上级部门信息*/
					//console.debug(res)
					this.parentoptions = res.data/* 将请求响应的数据 */
					
				}).catch();
				this.$http.post("/api/dept/mangerName").then(res=>{/* 发送请求获取上级领导信息 */
					//console.debug(res)
					this.mangeroptions = res.data
				}).catch()
				this.addFormVisible = true;/* 显示模态框 */
				this.addForm = {/* 清空数据 */
					id:'',
					name:'',
					state:'',
					sn:'',
					parent_id:'',
					manager_id: ''
				}
			},
			/* 当批量删除改变重新赋值 */
			selsChange(sels){
				this.sels = sels;
			},
			/* 批量删除按钮事件 */
			batchRemove(){
				var ids = this.sels.map(item => item.id);/* 获取全部id */
				this.$confirm('确认删除选中记录吗？', '提示', {/* 询问提示框 */
					type: 'warning'
				}).then(() => {/* 确认后 */
					this.listLoading = true;
					/*批量删除请求后台*/
					this.$http.patch("/api/dept",ids).then(res=>{
						this.$message({
							message: res.data.msg,
							type: 'success'
						});
						this.loadDeptdata()/* 删除后重新加载 */
					}).catch()
				}).catch(() => {

				});
			},
			/* 页面变化后事件 */
			handleCurrentChange(val){
				//console.debug(val)
				this.currentPage = val
				this.loadDeptdata()
			},
			/* 页面加载数据 */
			loadDeptdata(){
				let pageInfo = {
					name : this.filters.name,
					localPage : this.currentPage,
					pageSize : this.pageSize,
					state : this.value
				}/* 请求后台获取数据 */
				this.$http.post("/api/dept",pageInfo).then(res=>{
					this.dept = res.data.data
					console.debug(this.dept)
					this.total = res.data.total
				}).catch()
			},
			/* 单行删除 */
			handleDel(index,row){
				let id = row.id;/* 获取当前行id */
				this.$http.delete("/api/dept/"+row.id).then(res=> {/* 发送请求删除 */
					this.$message({
						message: res.data.msg,
						type: 'success'
					})/* 重新加载页面 */
					this.loadDeptdata()
				}).catch()
			}
		},
		/* 页面加载 */
		mounted() {
			this.loadDeptdata()
		}
	}
</script>

<style scoped>

</style>